<?php
require_once '/../Controleur/Personnage_controleur.php';
require_once '/../Controleur/Carte_controleur.php';
?>
<script src="src/lib/leaflet/leaflet.js"></script>
<script src="src/lib/leaflet/layer/marker/mapping-marker.js"></script>
<div id="map"></div>
<!--Permet d'afficher la liste des personnages-->
<div id="personnage">
    <?php
    $controleur = new Carte_controleur();
    $listePerso = Personnage_controleur::afficherListePersonnage();
    foreach ($listePerso as $perso) {
        ?>
        <span>
            <INPUT type='checkbox' class='check' name='<?php echo $perso->getidPersonnage() ?>' value='<?php echo $perso->getidPersonnage() ?>' />
            <label><?php echo $perso->getPrenomPersonnage() . ' ' . $perso->getNomPersonnage() ?></label>
        </span>
        <?php
        if (isset($_SESSION['idUser'])) {
            echo "<img src='src/Vue/images/addmarker.png' class='add_icon'/>";
        }
        ?>
        <br/>
        <?php
    }
    ?>
</div>

<?php
if (isset($_SESSION['idUser'])) {
    $saison
    ?>
    <div id="add_repere">
        <form>
            <h2></h2>
            <input id='choix_perso' type='hidden' value='' />
            <input id='lat' type='hidden' value='' />
            <input id='long' type='hidden' value='' />

            <label for="saison">Choix de la saison</label>
            <select id="choix_saison" name="saison">
                <?php
                for ($i = 1; $i <= $controleur->getNbSaison(); $i++) {
                    echo "<option val=$i>$i</option>";
                }
                ?>
            </select>

            <label for="episode">Choix de l'épisode</label>
            <select id="choix_episode" name="episode">
                <?php
                for ($i = 1; $i <= $controleur->getNbEpisodeBySaison(1); $i++) {
                    echo "<option val=$i>$i</option>";
                }
                ?>
            </select>

            <label for="type">Choix du type de repère</label>
            <select id="choix_type" name="type">
                <?php
                foreach ($controleur->getTypeRepere() as $typeRepere) {
                    echo "<option value='" . $typeRepere['idTypeRepere'] . "' >" . $typeRepere['typeRepere'] . "</option>";
                }
                ?>
            </select>
            <label for="info_repere">Informations sur le repère</label>
            <textarea id="info_repere" name="info_repere" maxlength="64"></textarea>

            <input id='valider_repere' type='submit' value='Valider Repere'/>
        </form>
    </div>
    <?php
}
?>

<script>
    $(document).ready(function () {
        $('#add_repere').hide();
        $('#valider_repere').prop('disabled', true);

    });
    // Affichage et retrait des points de la map
    var listReperes = [];
    var typeRep;
    $(".check").on("click", function () {
        var val = $(this).val();

        if ($(this).is(':checked')) {
            $.ajax({
                method: "POST",
                url: "src/Vue/action_carte.php",
                data: {action: 'get', idPerso: val}

            }).done(function (msg) {
                reperes = JSON.parse(msg);
                listReperes[val] = [];
                for (var i = 0; i < reperes.length; i++) {
                    typeRep = reperes[i]['type'];
                    listReperes[val][i] = L.marker([reperes[i]['lat'], reperes[i]['long']], {icon: LeafIcon[typeRep]}).bindPopup(reperes[i]['info']).addTo(map);
                }
            });
        } else {
            for (var i = 0; i < listReperes[val].length; i++) {
                map.removeLayer(listReperes[val][i]);
            }
        }
    });

    var mbAttr = '';
    var mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';

    var map = L.map('map').setView([33.647469, -84.47842], 8);

//    Création des différentes maps
    var grayscale = L.tileLayer(mbUrl, {id: 'examples.map-20v6611k', attribution: mbAttr}),
            streets = L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7', attribution: mbAttr});
    var baseLayers = {
        "Streets": streets,
        "Grayscale": grayscale
    };

    L.control.layers(baseLayers).addTo(map);
//ajout base de la map
    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '',
        id: 'examples.map-i875mjb7'
    }).addTo(map);

    $('.add_icon').on('click', function () {
        $('#add_repere').show();
        var iconContainer = $(this).prev();
        $('#add_repere h2').html(iconContainer.children('label').html());
        $('#choix_perso').val(iconContainer.children('input').val());
    });

    $('#choix_saison').on('change', function () {
        $.ajax({
            method: "POST",
            url: "src/Vue/action_carte.php",
            data: {action: 'nbEpisode', saison: $('#choix_saison').val()}

        }).done(function (msg) {
            $('#choix_episode').html('');
            for (var i = 0; i < msg; i++) {
                $('#choix_episode').append("<option value='" + (i + 1) + "'>" + (i + 1) + "</option>");
            }
        });
    });

    var repere;
    map.on('click', function (e) {
        if ($('#add_repere').is(':visible')) {
            $('#valider_repere').prop('disabled', false);
            $('#lat').val(e.latlng.lat);
            $('#long').val(e.latlng.lng);
            if (repere != undefined) {
                map.removeLayer(repere);
            }
            repere = L.marker(e.latlng, {icon: LeafIcon[$('#choix_type option:selected').html()]}).bindPopup('info').addTo(map);
        }
    });

    $('#valider_repere').on('click', function (e) {
        e.preventDefault();
        $('#valider_repere').prop('disabled', true);
        $.ajax({
            method: "POST",
            url: "src/Vue/action_carte.php",
            data: {
                action: 'add',
                saison: $('#choix_saison').val(),
                episode: $('#choix_episode').val(),
                lat: $('#lat').val(),
                long: $('#long').val(),
                type: $('#choix_type').val(),
                perso: $('#choix_perso').val(),
                info: $('#info_repere').val()
            }
        }).done(function (msg) {
            console.log(msg);
            $('#add_repere').hide();
            map.removeLayer(repere);
        });
    });


</script>
